<template>
  <!-- 客户概况 -->
  <div class="page-customer-profiling">
    <!-- 时间选择框 -->
    <CustomerHeader @time-data="recTimeData" />
    <!-- 客户概况及趋势 -->
    <CustomerStats :time-data="timeData" />
    <!-- 会员统计 -->
    <CustomerMember :time-data="timeData" />
    <!-- 成交客户分析 -->
    <CustomerCom :time-data="timeData" />
    <!-- 客户留存分析 -->
    <CustomerRetention />
  </div>
</template>

<script setup>
import CustomerHeader from './components/customer-header.vue'
import CustomerStats from './components/customer-stats.vue'
import CustomerMember from './components/customer-member.vue'
import CustomerCom from './components/customer-com.vue'
import CustomerRetention from './components/customer-retention.vue'

const timeData = reactive({
  dateValue: 1,
  dateRange: []
})

/**
 * 接收时间参数
 */
const recTimeData = (data) => {
  timeData.dateValue = data.dateValue
  timeData.dateRange = data.dateRange
}

</script>

<style lang="scss" scoped>
.page-customer-profiling {
  :deep(.base-section)  {
    padding: 16px;
    background: #f7f8fa;
    margin-bottom: 16px;
  }
}
</style>
